// main menu zone : tools, user info, entities selector, menus and footer

body.caerp .base_menu {
	align-items: flex-start;
	background: var(--menu-background-color);
	box-shadow: 0 0 10px var(--box-shadow-color);
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	justify-content: space-between;
	overflow-x: hidden;
	overflow-y: auto;
	position: relative;
	transition: margin .25s ease-out;
	z-index: $floatingLayer;

	>*:not(nav) {
		flex: 0 0 auto;
		padding: var(--variable-vertical-padding-m) var(--menu-horizontal-padding);
	}

	>nav {
		flex: 1 0 auto;
		padding: var(--variable-vertical-padding-m) 0;
		width: 100%;

		+nav {
			border-top: 1px dashed var(--border-trans-color);
			flex: 5 0 auto;
			padding-top: 0;
		}
	}

	.menu_tools {
		list-style-type: none;
		padding: 0;
		position: absolute;
		top: .75rem;
		right: 5px;

		button {
			all: inherit;
			cursor: pointer;

			&:hover,
			&:focus,
			&:active {
				svg {
					fill: var(--form-icon-button-hover-color);
				}
			}
		}

		.icon svg {
			height: 1.5rem;
			margin: 4px;
			width: 1.5rem;
		}
	}

	.user_menu {
		margin-top: 3.5rem;
		width: 100%;

		>div.flex {
			align-items: center;
			display: flex;
			flex-wrap: nowrap;
			position: relative;
		}

		button {
			all: inherit;
			cursor: pointer;
			font-weight: bold;
			padding: 0 5px;

			&:hover,
			&:focus,
			&:active {
				box-shadow: none;
				transform: none;

				svg {
					fill: var(--form-icon-button-hover-color);
				}
			}
		}

		.menu_arrow {
			display: inline-block;
			margin-left: var(--padding-s);
			margin-right: var(--negative-padding-s);
		}

		.flex+nav {
			border-bottom: 1px dashed var(--border-trans-color);
			display: none;
			flex: 0 0 auto;
			margin-left: var(--menu-horizontal-negative-margin);
			margin-right: var(--menu-horizontal-negative-margin);
			padding-top: var(--padding-s);
			width: calc(100% + var(--menu-horizontal-padding) + var(--menu-horizontal-padding));
		}

		.flex.open {
			.menu_arrow {
				transform: rotate(180deg);
			}

			+nav {
				display: block;
			}
		}
	}

	nav {
		list-style-type: none;
		width: 100%;

		li {
			display: block;
		}

		a,
		button {
			border-left: var(--menu-border-width) solid var(--menu-border-color);
			color: var(--menu-text-color);

			&:hover,
			&:focus {
				border-left-color: var(--theme-color);
				background: var(--theme-color);
				color: var(--theme-text-color);

				svg {
					fill: var(--theme-text-color);
				}
			}

			&:active {
				border-color: var(--static-color);
			}
		}

		a,
		li>span {
			display: block;
			padding: 5px 10px;
			padding-left: var(--menu-link-padding);
		}

		a {
			text-decoration: none;
		}

		li>div {
			padding: 0 10px;
			padding-left: var(--menu-link-padding);
		}

		li>select {
			font-weight: bold;
			max-width: calc(100% - 4px);
			width: calc(100% - 4px) !important;
			margin: 0 2px;

			option {
				font-weight: normal;
			}
		}

		button {
			all: inherit;
			border: 0 none;
			cursor: pointer;
			line-height: 1.25rem;
			margin: 0;
			padding: 7px 10px;
			padding-left: var(--menu-horizontal-padding);
			position: relative;
			width: 100%;

			&:hover,
			&:focus,
			&:active {
				box-shadow: none;
				transform: none;

				svg {
					fill: var(--form-icon-button-hover-color);
				}
			}

			svg {
				&.menu_arrow {
					display: inline-block;
					margin-left: 0;
					margin-right: var(--negative-padding-s);
				}

				&[class*="theme"] {
					position: absolute;
					right: 0;
				}
			}

			+ul {
				display: none;
			}

			&[aria-expanded="true"] {
				svg.menu_arrow {
					transform: rotate(180deg);
				}

				+ul {
					display: block;
				}
			}
		}

		li li button {
			svg[class^="menu"] {
				position: static;
			}
		}

		a:active,
		li.current_item>a,
		li.current_item>span {
			background: var(--menu-active-background-color);
			border-color: var(--theme-color);
			font-weight: bold;

			&:hover,
			&:focus,
			&:active {
				background: var(--theme-color);
			}
		}

		li.current_item>span {
			cursor: default;
		}

		ul li.current_submenu,
		ul.single_menu li.current_menu {
			background: var(--theme-color);
			border: 1px solid var(--theme-color);
			border-width: 1px 0;
			color: var(--theme-text-color);

			a,
			span {
				border-color: var(--theme-color);
				color: var(--theme-text-color);
			}

			a,
			button,
			span {
				color: var(--theme-text-color);

				svg {
					fill: var(--theme-text-color);
				}
			}

			a,
			li>span {
				padding-left: var(--menu-sub-link-padding);
			}

			>button {
				font-weight: bold;

				&:hover,
				&:focus {
					svg {
						fill: var(--form-icon-button-hover-color);
					}
				}
			}

			a:hover,
			a:focus {
				background: var(--menu-background-color);
				border-color: var(--menu-background-color);
				color: var(--menu-text-color);
				text-shadow: none !important;

				svg {
					fill: var(--menu-text-color);
				}
			}

			a:active,
			li.current_item>a,
			li.current_item>span {
				background: var(--menu-active-background-color);
				color: var(--menu-text-color);
			}

			a:active,
			li.current_item>a {

				&:hover,
				&:focus,
				&:active {
					background: var(--menu-background-color);
				}
			}
		}

		.select2-container .select2-selection {
			padding: var(--padding-m) 0;
		}
	}

	nav>ul:not(.single_menu) {
		>li>button {
			font-weight: bold;
			line-height: 1.625rem;

			svg.menu_arrow {
				left: 5px;
				margin: 5px;
				position: absolute;
			}
		}
	}

	footer {
		font-size: .625rem;
	}
}

@media (min-height: 1001px) {
	body.caerp .base_menu {
		nav ul a {
			padding-bottom: var(--padding-m);
			padding-top: var(--padding-m);
		}
	}
}

@media (min-width: $desktopWidth ) {
	body.caerp .menu_tools {

		.menu_show,
		.menu_hide {
			display: none;
		}
	}

	body.caerp:not(.menu_mini) .menu_tools {
		left: 5px;
		right: auto;
	}


	body.caerp.menu_mini {
		.base_menu {
			margin-left: var(--menu-slide-margin);
			overflow-y: hidden;

			.cae_logo,
			header,
			footer,
			nav,
			.user_menu {
				opacity: 0;
				pointer-events: none;
				transition: opacity .25s .1s ease-out;
			}

			nav {
				padding-right: var(--menu-mini-width);

				li>div {
					padding-left: var(--menu-mini-width);
				}
			}
		}

		.main_area {
			width: calc(100vw - var(--menu-mini-width));
		}

		.menu_tools {
			.menu_size button {
				display: flex;
				height: calc(100vh - 10px);
				position: relative;
				width: 1.875rem;

				svg {
					left: 0;
					position: absolute;
					top: 0;
					transform: rotate(180deg);
				}
			}
		}
	}

	body.caerp .base_menu {
		width: var(--menu-maxi-width);
	}

	body.caerp .base_content,
	body.caerp .main_area {
		width: calc(100vw - var(--menu-maxi-width));
	}

	body.caerp .main_area {
		transition: width .25s ease-out;
	}
}

@media (max-width: $desktopWidth ) {
	body.caerp .menu_tools {

		.menu_size,
		.menu_hide {
			display: none;
		}
	}

	body.caerp .base_menu {
		margin-left: var(--menu-slide-margin);
		width: var(--menu-maxi-width);

		.cae_logo,
		header,
		footer,
		nav,
		.user_menu {
			opacity: 0;
			pointer-events: none;
			transition: opacity .25s .1s ease-out;
		}

		nav {
			padding-right: var(--menu-horizontal-padding);

			li>div {
				padding-left: var(--menu-horizontal-padding);
			}
		}

		.menu_tools {
			.menu_show {
				display: flex;
				height: calc(100vh - 10px);

				button {
					position: relative;
					width: 1.875rem;

					svg {
						left: 0;
						position: absolute;
						top: 0;
					}
				}
			}
		}
	}

	body.caerp .main_area,
	body.caerp .base_content {
		width: calc(100vw - var(--menu-mini-width) - 2px);
	}

	body.caerp .base_menu:not(.open) {
		overflow-y: hidden;
	}

	body.caerp .base_menu.open {
		height: 100vh;
		margin-left: 0;
		margin-right: var(--menu-slide-margin);
		z-index: $floatingMenuLayer;

		.cae_logo,
		header,
		footer,
		nav,
		.user_menu {
			opacity: 1;
			pointer-events: auto;
		}

		nav {
			padding-right: 0;
		}

		.menu_hide {
			display: block;
		}

		.menu_show {
			display: none;
		}
	}
}

@media (max-width: $mobileWidth ) {
	body.caerp .base_menu {
		height: 100vh;
		position: absolute;
	}

	body.caerp .main_area,
	body.caerp .base_content {
		width: 100vw;
	}

	body.caerp .base_menu:not(.open) {
		background: var(--theme-color);
		box-shadow: none;
		height: 3.25rem;
		overflow: hidden;

		ul.menu_tools {
			right: .625rem;
			top: .5rem;

			.icon svg {
				fill: var(--theme-text-color);
				margin: .5rem;
			}
		}
	}
}

@media print {

	// styles used when printing pages
	body.caerp .base_menu {
		box-shadow: none;
		display: none;
	}

	body.caerp .base_content {
		outline: 1px dashed $print_fadedGrey;
		width: 100%;
	}
}